<template>
	<view>
		<u-popup :show="show"  mode="bottom" :closeable="true" :round="10" @close="close">
		   <view class="popDialog">
			   
		      <view class="font-32 text-bold title">预约包厢</view>
		      <view class="boxPanel flex-between">
		        <view class="text-bold">姓名</view>
		        <input type="text" placeholder="请输入姓名" v-model="formData.name" placeholder-class="inputs" class="text-right">
		      </view>
			  
			  <view class="boxPanel flex-between">
			    <view class="text-bold">手机号</view>
			    <input type="number" maxlength="11" placeholder="请输入手机号" v-model="formData.phone" placeholder-class="inputs" class="text-right">
			  </view>
			  
			  <!-- <view class="boxPanel flex-between">
			    <view class="text-bold">预约时间</view>
			    <view class="flex-y-center" style="width: 60%;justify-content: flex-end;" @click="openTimePicker">
			       <input type="text" placeholder="请选择预约时间" v-model="formData.appointmentTime" placeholder-class="inputs" :disabled="true" style="text-align: right;">
			    	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
			    </view>
			  </view> -->
			  <view class="boxPanel flex-between">
			    <view class="text-bold">预约时间</view>
			    <view class="flex-y-center" style="width: 60%;justify-content: flex-end;" @click="openTimePicker">
			       <input type="text" placeholder="请选择预约时间" v-model="time_str" placeholder-class="inputs" :disabled="true" style="text-align: right;">
			    	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
			    </view>
			  </view>
			  
			  <view class="boxPanel row" v-if="makeType == 'business'">
			  	<view class="m-b-10 text-bold">预约需求</view>
			  	<textarea placeholder="请填写预约需求" placeholder-class="inputs" v-model="formData.remark"></textarea>
			  </view>
			  
			  <view style="height: 120rpx;"></view>
		      <view class="footer fixfooter">
		      	<view class="submit" @click="submit">确定</view>
		      </view>
			  
		   </view>
		 </u-popup>
		 <u-datetime-picker 
			:show="showTimePicker" 
			v-model="timeValue" 
			mode="datetime" 
			@confirm="confirmTime" 
			@cancel="cancelTime">
		 </u-datetime-picker>

		 <!-- 预约时间选择组件 -->
		 <choose-food-time :show="showTimeFood" :roomId="roomId" @close="closeTimePicker" @chooseTime="chooseTime" @reset="reset"></choose-food-time>
	</view>
</template>

<script>
	import chooseFoodTime from '@/components/chooseFoodTime/chooseFoodTime.vue';
	export default {
		name:"makeFood",
		props: {
		  show: {
		    type: Boolean,
		    default: false
		  },
		  makeType: {
			type: String,
			default: '', //business 包厢预约
		  },
		  roomId: {
			type: [String, Number],
			default: '' // 包厢id
		  }
		},
		components: {
		  chooseFoodTime
		},

		data() {
			return {
				formData: {
					name: '', // 姓名
					phone: '', // 手机号
					appointmentTime: '', // 预约时间
					remark: '', // 预约需求
					subscribe_type: '',     //0上午,1晚上
				},
				showTimePicker: false,
				timeValue: Number(new Date()),
				//时间组件参数
				showTimeFood: false,
				time_str: '',

			};
		},
		created() {
			// 获取缓存subscribe_order，如果有数据就进行赋值
			if(uni.getStorageSync('subscribe_order')) {
				var data = uni.getStorageSync('subscribe_order');
				this.formData.name = data.subscribe_name;
				this.formData.phone = data.subscribe_mobile;
			}else {
				// 获取缓存的用户信息，将昵称赋值给姓名，手机号赋值
				var userInfo = uni.getStorageSync('userInfo');
				if(userInfo) {
					this.formData.name = userInfo.nickname;
					this.formData.phone = userInfo.mobile;
				}
			}
		},
		methods: {
			reset(e) {
				this.formData.appointmentTime = "";
				this.formData.subscribe_type = "";
				this.time_str = "";
				this.showTimeFood = false;
			},
		  close() {
		    this.$emit("close")
		  },
		  chooseTime(e) {
			this.formData.appointmentTime = e.time_day;
			this.formData.subscribe_type = e.food_type;
			this.time_str = this.formData.appointmentTime + ' ' + this.formData.subscribe_type;
			this.showTimeFood = false;
		  },
		  submit() {
			if(!this.validateForm()) return;
			
			uni.showLoading({
				title: '提交中...'
			});
			
			const params = {
				realname: this.formData.name,
				mobile: this.formData.phone,
				subscribe_time: this.formData.appointmentTime,
				remark: this.formData.remark || '',
				room_id: this.roomId,
				subscribe_type: this.formData.subscribe_type == '午餐' ? 0 : 1, //0上午,1晚上
			};
			
			this.$api.sendRequest({
				url: "/api/food/applyroom",
				data: params,
				success: res => {
					if(res.code == 0) {
						uni.hideLoading();
						uni.showToast({
							title: '已提交预约，等待客服联系！',
							icon: 'success'
						});
						this.$emit("close")
					}else {
						uni.hideLoading()
						this.$util.showToast({title: res.message});
					}
				}
			})
		  },
		  validateForm() {
			if(!this.formData.name) {
				uni.showToast({title: '请输入姓名', icon: 'none'});
				return false;
			}
			if(!this.formData.phone || this.formData.phone.length !== 11) {
				uni.showToast({title: '请输入正确的手机号', icon: 'none'});
				return false;
			}
			if(!this.formData.appointmentTime) {
				uni.showToast({title: '请选择预约时间', icon: 'none'});
				return false;
			}
			return true;
		  },
		  openTimePicker() {
			this.showTimeFood = true;
		  },
		  confirmTime(e) {
			this.formData.appointmentTime = uni.$u.date(e.value, 'yyyy-mm-dd hh:MM');
			this.showTimePicker = false;
		  },
		  cancelTime() {
			this.showTimePicker = false;
		  },
		  
		}
	}
</script>

<style lang="scss" scoped>
.popDialog {
  width: 100%;
  padding: 40rpx 0;
  border-radius: 20rpx 20rpx 0 0;
  box-sizing: border-box;
  background: $color-bg;
  .title {
    text-align: center;
    padding-bottom: 38rpx;
  }
  .boxPanel {
    .inputs {
      font-size: 28rpx;
      color: #B5B9C7;
    }
    .txt {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}
textarea {
  height: 100rpx;
}
.footer2 {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 0 24rpx;
	 box-sizing: border-box;
	 .submit {
	   width: 265rpx;
	   height: 86rpx;
	   line-height: 86rpx;
	   text-align: center;
	   background-color: $color-title2;
	   color: #fff;
	   border-radius: 40rpx;
	 }
}
</style>